  <template>
  <div class="future-weatherday">
    <div class="title">
      <div class="geo-location">
        <input
          type="search"
          name=""
          id=""
          v-model="city"
          placeholder="请输入要搜索的城市名称"
          @change="getCity()"
        />
      </div>
      <div>
        <p>
          <span class="color_red">{{ location.name }}</span>
          未来七天天气
        </p>
        <p>最近更新时间：{{ updateTime }}</p>
      </div>
    </div>
    <div class="weather">
      <div class="daily" v-for="item in daily" :key="item.id"><!--遍历-->
        <p>{{ item.fxDate }}</p>
        <p>日出:{{ item.sunrise }}</p>
        <p>日落:{{ item.sunset }}</p>
        <p>当天月升:{{ item.moonrise }}</p>
        <p>当天月落:{{ item.moonset }}</p>
        <p>
          月相名称:{{ item.moonPhase
          }}<i :class="'qi-' + item.moonPhaseIcon"></i>
        </p>
        <p>预报当天最高温度:{{ item.tempMax }}℃</p>
        <p>预报当天最低温度:{{ item.tempMin }}℃</p>
        <p>
          白天天气：{{ item.textDay }} <i :class="'qi-' + item.iconDay"></i>
        </p>
        <p>
          夜间天气:{{ item.textNight }} <i :class="'qi-' + item.iconNight"></i>
        </p>
        <p>白天风向360角度:{{ item.wind360Day }}</p>
        <p>白天风向:{{ item.windDirDay }}</p>
        <p>白天风力等级:{{ item.windScaleDay }}级</p>
        <p>白天风速:{{ item.windSpeedDay }}公里/小时</p>
        <p>夜间风向360角度:{{ item.wind360Day }}</p>
        <p>夜间风向:{{ item.windDirDay }}</p>
        <p>夜间风力等级:{{ item.windScaleDay }}级</p>
        <p>夜间风速:{{ item.windSpeedDay }}公里/小时</p>
        <p>当天总降水量：{{ item.precip }}毫米</p>
        <p>紫外线强度指数：{{ item.uvIndex }}</p>
        <P>相对湿度:{{ item.humidity }}%</P>
        <p>大气压强：{{ item.pressure }}百帕</p>
        <p>能见度：{{ item.vis }}公里</p>
        <p>云量：{{ item.cloud }}%</p>
      </div>
    </div>
    <!-- <div class="topcity">
      <div class="POI" v-for="item2 in daily" :key="item2.id">
        <p>POI（兴趣点）名称:{{ item2.name }}</p>
        <p>POI（兴趣点）ID:{{ item2.id }}</p>
        <p>POI（兴趣点）纬度:{{ item2.lat }}</p>
        <p>POI（兴趣点）经度:{{ item2.lon }}</p>
        <p>POI（兴趣点）的上级行政区划名称:{{ item2.adm2 }}</p>
        <p>POI（兴趣点）所属一级行政区域:{{ item2.adm1 }}</p>
        <p>POI（兴趣点）所属国家名称:{{ item2.country }}</p>
        <p>POI（兴趣点）所在时区:{{ item2.tz }}</p>
        <p> POI（兴趣点）目前与UTC时间偏移的小时数:{{ item2.utcOffset }}</p>
        <p>POI（兴趣点）是否当前处于夏令时:{{ item2.isDst }}</p>
        <p>POI（兴趣点）的属性:{{ item2.type }}</p>
        <p>地区评分:{{ item2.rank }}</p>
        <p>该地区的天气预报网页链接:{{ item2.fxLink }}</p>
      </div>
    </div> -->
  </div>
</template>
<script>
import axios from "axios";
import dayjs from "dayjs";
import { mapState } from "vuex";
import { API_7DAY, API_CITY,  KEY } from "@/common/constrant.js";
import "qweather-icons/font/qweather-icons.css";
export default {
  data() {
    return {
      daily: [],
      city: "",
      // poi: [],
    };
  },
  computed: {
    // 传入数组或对象（辅助对象）
    ...mapState(["location"]),    
    updateTime: function () {
      //format对数据进行格式化处理
      return dayjs(this.daily.updateTime).format("YYYY-MM-DD HH:mm:ss");
    },
  },
  created() {
    this.getData();
    // this.getPOI();
  },
  methods: {
    getData() {
      axios
        .get(API_7DAY, {
          params: {
            location: this.location.id,
            key: KEY,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.daily = res.data.daily;
        });
    },
    getCity() {
      axios
        .get(API_CITY, {
          params: {
            key: KEY,
            location: this.city,
          },
        })
        .then((res) => {
          console.log(res.data);
          this.$store.commit("updateLocationMutation", res.data.location[0]);
          console.log(this.$store.state.location);
        });
    },
    // getPOI() {
    //   axios
    //     .get(API_POI, {
    //       params: {
    //         key: KEY,
    //         location: this.location.id,
    //       },
    //     })
    //     .then((res) => {
    //       console.log(res.data);
    //       this.poi = res.data.poi;
    //     });
    // },
  },
  watch: {
    location: function () {
      this.getData();
      // this.getPOI();
    },
  },
};
</script>
  
  <style scoped>
.weather {
  margin: 0px auto;
  display: flex;
}
.daily {
  width: 200px;
  height: 900px;
  background-image: url("https://widget-s.qweather.net/img/plugin/190516/bg/view/100d.png");
  margin: 3% auto;
}
.daily > p {
  color: #fff;
}
span.color_red {
  color: red;
}
i {
  font-size: 20px;
  color: rgb(220, 230, 44);
}
</style>